import DGListView from "../../../components/DGListView.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGConnect from "../../../sources/DGConnect.ts";
import {useEffect, useState} from "react";
import AppProvider from "../../../sources/AppProvider.ts";
import {ArrowBack} from "@mui/icons-material";
import DGFadeView from "../../../components/DGFadeView.tsx";
import {useNavigate} from "react-router-dom";
import DGFooterView from "../../../components/DGFooterView/DGFooterView.tsx";
import DGForgetIndex from "../../DGAccountOperates/Forget/DGForgetIndex.tsx";
import DGForgetCode from "../../DGAccountOperates/Forget/DGForgetCode.tsx";
import DGForgetNewPwd from "../../DGAccountOperates/Forget/DGForgetNewPwd.tsx";
import DGForgetResult from "../../DGAccountOperates/Forget/DGForgetResult.tsx";
import {Box, useTheme} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import DGTextView from "../../../components/DGTextView.tsx";
import SelfFormFreezeIndex from "../components/SelfFormFreeze/SelfFormFreezeIndex.tsx";
import SelfFormFreezeCode from "../components/SelfFormFreeze/SelfFormFreezeCode.tsx";
import SelfFormFreezeResult from "../components/SelfFormFreeze/SelfFormFreezeResult.tsx";
import SelfFormUnfreezeIndex from "../components/SelfFormUnfreeze/SelfFormUnfreezeIndex.tsx";
import SelfFormUnfreezeCode from "../components/SelfFormUnfreeze/SelfFormUnfreezeCode.tsx";
import SelfFormUnfreezeResult from "../components/SelfFormUnfreeze/SelfFormUnfreezeResult.tsx";
import SelfFormLogoutIndex from "../components/SelfFormLogout/SelfFormLogoutIndex.tsx";
import SelfFormLogoutCode from "../components/SelfFormLogout/SelfFormLogoutCode.tsx";
import SelfFormLogoutResult from "../components/SelfFormLogout/SelfFormLogoutResult.tsx";
import SelfFormLogoutAgree from "../components/SelfFormLogout/SelfFormLogoutAgree.tsx";

const DGSecuritySelfForm = () => {
    // 全局上下文
    const App = AppProvider.useAppContext();
    // 查询模式
    const m = useTheme().palette.mode === "light";
    // 路由跳转
    const router = useNavigate();
    // 弹窗状态
    const [view, setView] = useState("");

    // 切换弹窗 handleSDV = handleSwitchDialogView
    const handleSDV = (text: string) => {
        // 切换弹窗
        setView(text);
        // 替换路由
        router("?" + text, {replace: true});
    }

    // 打开面板
    const handleOpen = (text: string) => {
        // 历史堆栈
        router("?");
        // 切换
        handleSDV(text);
    }


    // 标题设置
    useEffect(() => {
        App?.setTitle("自助表单");
    }, [App]);


    // 加载返回和后退识别
    useEffect(() => {
        const handlePopState = () => setView("");
        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, [view]);


    return (<DGFadeView time={800} load autoLoad>

        {/* 找回密码 */}
        <DGForgetIndex state={view === "forget_index"} switchView={(text: string) => handleSDV(text)}/>
        {/* 找回密码获取验证码弹窗 */}
        <DGForgetCode state={view === "forget_code"} switchView={(text: string) => handleSDV(text)}/>
        {/* 设置新密码弹窗 */}
        <DGForgetNewPwd state={view === "forget_new"} switchView={(text: string) => handleSDV(text)}/>
        {/* 密码重置结果 */}
        <DGForgetResult state={view === "forget_result"} switchView={(text: string) => handleSDV(text)}/>

        {/* 自助冻结 */}
        <SelfFormFreezeIndex state={view === "freeze_index"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助冻结验证码 */}
        <SelfFormFreezeCode state={view === "freeze_code"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助冻结结果 */}
        <SelfFormFreezeResult state={view === "freeze_result"} switchView={(text: string) => handleSDV(text)}/>

        {/* 自助解除冻结 */}
        <SelfFormUnfreezeIndex state={view === "unfreeze_index"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助解除冻结验证码 */}
        <SelfFormUnfreezeCode state={view === "unfreeze_code"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助解除冻结结果 */}
        <SelfFormUnfreezeResult state={view === "unfreeze_result"} switchView={(text: string) => handleSDV(text)}/>

        {/* 自助注销账户 */}
        <SelfFormLogoutIndex state={view === "logout_index"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助注销账户验证码 */}
        <SelfFormLogoutCode state={view === "logout_code"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助注销账户相关事项 */}
        <SelfFormLogoutAgree state={view === "logout_agree"} switchView={(text: string) => handleSDV(text)}/>
        {/* 自助注销账户结果 */}
        <SelfFormLogoutResult state={view === "logout_result"} switchView={(text: string) => handleSDV(text)}/>

        {/* 返回选项 */}
        <Box style={{
            margin: "15px 15px", padding: "10px 15px",
            display: "flex", alignItems: "center", gap: "15px",
            backgroundColor: m ? "#EDEDED" : "#222222",
        }}>
            <IconButton onClick={() => router(-1)}><ArrowBack/></IconButton>
            <DGTextView Body Bold>返回安全中心</DGTextView>
        </Box>

        {/* 自助账户表单 */}
        <DGListView title="自助账户表单" subTitle="账户自助表单，部分需进行登录。" NoBackground Margin="15px" gap={15}>
            {/* 忘记密码表单选项 */}
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("forget_password.png")}
                title="自助找回密码" subText="找回您的逐梦园账户的登录密码。"
                onClick={() => handleOpen("forget_index")}/>
            {/* 冻结账号表单选项 */}
            <DGListViewItem
                alignItems="flex-start" icon="冻" title="自助冻结账户"
                subText="账号存在被盗、设备丢失等风险，可以进行冻结账户。"
                onClick={() => handleOpen("freeze_index")}/>
            {/* 解冻账户表单选项 */}
            <DGListViewItem
                alignItems="flex-start" icon="解" title="自助解冻账户"
                subText="账户风险解除后，可以进行解除您的账户的冻结状态。"
                onClick={() => handleOpen("unfreeze_index")}/>
            <DGListViewItem
                alignItems="flex-start" avatar={DGConnect.img("account_delete.png")}
                title="自助注销账户" subText="自助注销您的账户，将会永久删除您的数据。"
                onClick={() => handleOpen("logout_index")}/>
        </DGListView>
        {/* 网站底部 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default DGSecuritySelfForm;